/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog title="批量新增风险评估任务" :visible.sync="show" append-to-body width="50%" :before-close="handleClose">
    <el-form :model="formInline" :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="市选择">
            <el-select
              v-model="formInline.cityId"
              value-key="id"
              filterable
              clearable
              style="width: 200px"
              @change="changeCity"
            >
              <el-option
                v-for="item in optionsListCity"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区选择" v-if="optionsListDist">
            <el-select
              v-model="formInline.districtId"
              value-key="id"
              filterable
              clearable
              style="width: 200px"
              @change="changeDist"
            >
              <el-option
                v-for="item in optionsListDist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="对象类型：">
            <el-select
              v-model="formInline.objectType"
              value-key="id"
              filterable
              @change="changeType"
            >
              <el-option
                v-for="item in optionsList"
                :key="item.id"
                :label="item.itemObjectName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评估模型：" v-if="modelData">
            <el-select
              v-model="formInline.modelId"
              value-key="id"
              filterable
              clearable
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in modelData"
                :key="item.id"
                :label="item.modelName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称：">
            <el-input v-model="formInline.jobName" placeholder="请输入任务名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型：">
            <el-select
              v-model="formInline.jobType"
              value-key="id"
              filterable
            >
              <el-option
                v-for="item in jobTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务描述：">
            <el-input v-model="formInline.jobDesc" placeholder="请输入任务描述"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行时间：">
            <el-date-picker v-model="formInline.jobRunTime" type="datetime" align="center" placeholder="选择执行时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行周期：">
            <el-input v-model="formInline.jobPeriod" placeholder="请输入执行周期"><i slot="suffix">天</i></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行频率：">
            <el-input v-model="formInline.jobFrequency" placeholder="请输入执行频率"><i slot="suffix">次</i></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="跨站信息：">
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column prop="stationId" label="站选择">
        <template v-slot="scope">
          <el-select
            v-model="tableData[scope.$index]['stationId']"
            value-key="id"
            filterable
            clearable
            style="width: 200px"
            @change="changeStation(scope.$index)"
          >
            <el-option
              v-for="item in optionsListStation"
              :key="item.id"
              :label="item.staName"
              :value="item.id"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="stakeIdList" label="桩选择">
        <template v-slot="scope">
          <el-select
            v-model="tableData[scope.$index]['stakeIdList']"
            value-key="id"
            filterable
            multiple
            collapse-tags
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in tableData[scope.$index]['optionsListState']"
              :key="item.id"
              :label="item.devName"
              :value="item.id"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template v-slot="scope">
          <el-button class="common-btn" @click="addJob()">+</el-button>
          <el-button class="delete-btn" @click="deleteJob(scope.$index)" v-show="tableData.length>1">-</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="checkBtn">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getRiskModelQuery} from "../../api/risk/riskModel";
import {getItemDictObject} from "../../api/risk/commonDict";
import {plan, warn} from "../../api/inspection/apiUntil";

export default {
  props: ['BatchDialogShow'], //接受父组件传递过来的数据
  data() {
    return {
      show: false, //弹窗默认隐藏
      optionsListCity: [],
      optionsListDist: [],
      optionsListStation: [],
      formInline: {
        jobName:'',
        jobType:'',
        objectType:'',
        jobDesc: '',
        modelId: '',
        jobRunTime: '',
        jobPeriod: '',
        jobFrequency: '',
      },
      modelData: [],
      tableData: [{stationId:'',stakeIdList:[]}],
      jobTypeList:[
        {
          name:'例行评估',
          value:'0'
        },
        {
          name:'专项评估',
          value:'1'
        },
      ],
      optionsList:[],
    };
  },
  mounted() {
    //显示弹窗
    this.initList()
    this.getPlanCity()
    this.show = this.BatchDialogShow
  },
  methods: {
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
      })
    },
    changeCity() {
      this.$set(this.formInline, "districtId", '')
      if (this.optionsListCity && this.formInline.cityId) {
        this.optionsListDist = this.optionsListCity.find(city => city.id === this.formInline.cityId).children
      }
    },
    changeDist() {
      this.optionsListState = []
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i]['stationId'] = ''
        this.tableData[i]['stakeIdList'] = []
      }
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.optionsListStation = res.data
      })
    },
    changeStation(index) {
      let params = {
        id: this.tableData[index]['stationId']
      }
      warn.getWarnStake(params).then((res) => {
        this.tableData[index]['optionsListState'] = res.data
      })
    },
    addJob() {
      this.tableData.push({stationId:'',stakeIdList:[]})
    },
    deleteJob(index) {
      this.tableData.splice(index, 1)
    },
    handleClose() {
      //关闭弹窗
      this.show = false
      this.$emit('closeDialog')
    },
    checkBtn() {
      //确定按钮
      if (this.checkParam()) {
        this.formInline.stationList = this.tableData
        this.$emit('selectData', this.formInline)   //发送数据到父组件
        this.handleClose()
      }
    },
    checkParam() {
      if (!this.formInline.jobName) {
        this.$message({message: '请输入任务名称', type: 'warning'})
        return false
      }
      if (!this.formInline.jobType) {
        this.$message({message: '请选择任务类型', type: 'warning'})
        return false
      }
      if (!this.formInline.objectType) {
        this.$message({message: '请选择对象类型', type: 'warning'})
        return false
      }
      if (!this.formInline.jobDesc) {
        this.$message({message: '请输入任务描述', type: 'warning'})
        return false
      }
      if (!this.formInline.modelId) {
        this.$message({message: '请选择模型', type: 'warning'})
        return false
      }
      if (!this.formInline.jobRunTime) {
        this.$message({message: '请选择运行时间', type: 'warning'})
        return false
      }
      if (!this.formInline.jobPeriod) {
        this.$message({message: '请输入任务执行周期', type: 'warning'})
        return false
      }
      if (!this.formInline.jobFrequency) {
        this.$message({message: '请输入任务执行频率', type: 'warning'})
        return false
      }
      let result = true
      this.tableData.forEach(item => {
        if (!item.stationId) {
          this.$message({ message: '请选择站点', type: 'warning' })
          result = false
        }
      })
      return result
    },
    changeType(type) {
      this.formInline.modelId = ''
      this.initModelList(type)
    },
    initList() {
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    async initModelList(type) {
      let params = {
        modelType: type,
        isReady: 1,
        source: 'web'
      }
      await getRiskModelQuery(params).then((res)=>{
        if(res){
          this.modelData = res.modelList
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    }
  }
};
</script>

<style scoped>

</style>
